<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    *{
        padding: 0;
        margin: 0;
    }
   body{
    background-color: skyblue;
   }
   
    .heart-animebox{
        display: inline-block;
        /* width: 100px; */
       margin: 0 auto;
    } 
    .heart{
        /* display: inline-block; */
        /* transform: translateY(120px); */
        position: relative;
        
        /* animation: move 2s ease 0s infinite  alternate-reverse; */
         
    }
    .heart-box{
        position: relative;
        /* top: 484.500px; */
        /* left: 50%; */
        margin: 50px auto;
        width: 70px;
        height: 70px;
       animation: move 2s ease 0s infinite alternate-reverse;
        background-color: white;
        /* transform: rotate(45deg);	 */
    }
    .heart-box::before{
        content: "";
        position: absolute;
        /* top: 0;
        left: 0; */
        width: 100%;    
        height: 100%; 
        background-color: white;
        border-radius: 100%;
        transform: translateX(-50%);
        animation: fenhon 2s ease 0s infinite alternate-reverse;
    }
    .heart-box::after{
        content: "";
        position: absolute;
        /* top: 0;
        left: 0; */
        width: 100%;    
        height: 100%; 
        background-color:  white;
        border-radius: 100%;
        transform: translateY(-50%);
        animation: fenhon 2s ease 0s infinite alternate-reverse;
    }
    @keyframes fenhon{
        50%{
            background-color :  pink;
        }
        
    }
    @keyframes move{
        0% {
         opacity: 0.4;
          left: 0px;
          top: 0;
          transform: scale(1, 1) rotate(45deg);
          
        }
        50%{
            opacity: 100%; 
            transform: scale(2, 2) rotate(45deg);
            background-color:  pink;
           
        }
      
        100% {
            opacity: 0.4;
            transform: scale(1, 1) rotate(45deg);
            left: 0px;
            top: 360px;
        }
    }
    .shadow{
        position: absolute;
        top:50%;
        left: 50%;
        width: 100px;
        height:30px;      
        border-radius: 50%;
        transform: translateX(-50%);
        animation: dow 2s ease 0s infinite alternate-reverse ;
        opacity: 0;

    }
    @keyframes dow{

     
        /* 50% {
          
            left: 37%;
            top: 410px;
            opacity: 1;
            background-image: radial-gradient(rgb(52, 52, 52) ,transparent 50%);
        }  */
         100% {
           
            /* left: 37%;
            top: 410px; */
            opacity: 1;
           
            background-image: radial-gradient(rgb(91, 91, 91) ,transparent 50%);
        }
    }
</style>
<body>
    <div class="warp">
        <!-- <div class="heart-animebox">
            <div class="heart"> -->
                <div class="heart-box"></div>
            <!-- </div>
        </div> -->

           <div class="shadow"></div>
    </div>
   
</body>
</html>